<h3>
   <!-- START Language list-->
   <div class="pull-right">
      <div dropdown="" is-open="language.listIsOpen" class="btn-group">
         <button type="button" dropdown-toggle="" class="btn btn-default">{{language.selected}}
            <span class="caret"></span>
         </button>
         <ul role="menu" class="dropdown-menu dropdown-menu-right animated fadeInUpShort">
            <li ng-repeat="(localeId, langName) in language.available"><a ng-click="language.set(localeId, $event)" href="#">{{langName}}</a>
            </li>
         </ul>
      </div>
   </div>
   <!-- END Language list    -->
   Dashboard
   <small>{{ 'dashboard.WELCOME' | translate:{ appName: app.name } }} !</small>
</h3>
<div class="row">
   <div class="col-lg-4">
      <!-- START List group-->
      <ul class="list-group">
         <li class="list-group-item">
            <div class="row row-table pv-lg">
               <div class="col-xs-6">
                  <p class="m0 lead">1204</p>
                  <p class="m0">
                     <small>Commits this month</small>
                  </p>
               </div>
               <div class="col-xs-6 text-center">
                  <div sparkline="" data-bar-color="{{colorByName('info')}}" data-height="60" data-bar-width="10" data-bar-spacing="6" data-chart-range-min="0" values="3,6,7,8,4,5"></div>
               </div>
            </div>
         </li>
         <li class="list-group-item">
            <div class="row row-table pv-lg">
               <div class="col-xs-6">
                  <p class="m0 lead">$ 3,200.00</p>
                  <p class="m0">
                     <small>Available budget</small>
                  </p>
               </div>
               <div class="col-xs-6 text-center">
                  <div sparkline="" data-type="line" data-height="60" data-width="80%" data-line-width="2" data-line-color="{{colorByName('purple')}}" data-chart-range-min="0" data-spot-color="#888" data-min-spot-color="{{colorByName('purple')}}" data-max-spot-color="{{colorByName('purple')}}"
                  data-fill-color="" data-highlight-line-color="#fff" data-spot-radius="3" values="7,3,4,7,5,9,4,4,7,5,9,6,4" data-resize="true"></div>
               </div>
            </div>
         </li>
         <li class="list-group-item">
            <div class="row row-table pv-lg">
               <div class="col-xs-6">
                  <p class="m0 lead">67</p>
                  <p class="m0">
                     <small>New followers</small>
                  </p>
               </div>
               <div class="col-xs-6">
                  <ul class="list-inline text-center">
                     <li>
                        <a href="#" tooltip="Katie">
                           <img src="app/img/user/02.jpg" alt="Follower" class="img-responsive img-circle thumb24" />
                        </a>
                     </li>
                     <li>
                        <a href="#" tooltip="Cody">
                           <img src="app/img/user/01.jpg" alt="Follower" class="img-responsive img-circle thumb24" />
                        </a>
                     </li>
                     <li>
                        <a href="#" tooltip="Tamara">
                           <img src="app/img/user/03.jpg" alt="Follower" class="img-responsive img-circle thumb24" />
                        </a>
                     </li>
                     <li>
                        <a href="#" tooltip="Gene">
                           <img src="app/img/user/04.jpg" alt="Follower" class="img-responsive img-circle thumb24" />
                        </a>
                     </li>
                     <li>
                        <a href="#" tooltip="Marsha">
                           <img src="app/img/user/04.jpg" alt="Follower" class="img-responsive img-circle thumb24" />
                        </a>
                     </li>
                     <li>
                        <a href="#" tooltip="Robin">
                           <img src="app/img/user/09.jpg" alt="Follower" class="img-responsive img-circle thumb24" />
                        </a>
                     </li>
                  </ul>
               </div>
            </div>
         </li>
      </ul>
      <!-- END List group-->
   </div>
   <div class="col-lg-8">
      <!-- START bar chart-->
      <div id="panelChart3" class="panel">
         <div class="panel-heading">
            <!-- START button group-->
            <div dropdown="dropdown2" class="pull-right btn-group">
               <button type="button" dropdown-toggle="" class="btn btn-default btn-sm">Monthly</button>
               <ul role="menu" class="dropdown-menu fadeInLeft animated">
                  <li><a href="#">Daily</a>
                  </li>
                  <li><a href="#">Monthly</a>
                  </li>
                  <li><a href="#">Yearly</a>
                  </li>
               </ul>
            </div>
            <!-- END button group-->
            <div class="panel-title">Projects Hours</div>
         </div>
         <div collapse="panelChart3" class="panel-wrapper">
            <div ng-controller="FlotChartController" class="panel-body">
               <flot src="'server/chart/barstackedv2.json'" options="barStackedOptions" height="250px"></flot>
            </div>
         </div>
      </div>
      <!-- END bar chart-->
   </div>
</div>
<div class="unwrap mv-lg">
   <!-- START chart-->
   <div id="panelChart9" ng-controller="FlotChartController" class="panel">
      <div class="panel-heading">
         <!-- START button group-->
         <div dropdown="dropdown1" class="pull-right btn-group">
            <button type="button" dropdown-toggle="" class="btn btn-default btn-sm">All time</button>
            <ul role="menu" class="dropdown-menu fadeInLeft animated">
               <li><a href="#">Daily</a>
               </li>
               <li><a href="#">Monthly</a>
               </li>
               <li class="divider"></li>
               <li><a href="#">All time</a>
               </li>
            </ul>
         </div>
         <!-- END button group-->
         <div class="panel-title">Overall progress</div>
      </div>
      <div collapse="panelChart9" class="panel-wrapper">
         <div class="panel-body">
            <flot src="'server/chart/splinev2.json'" options="splineOptions" height="300px"></flot>
         </div>
         <div class="panel-body">
            <div class="row">
               <div class="col-sm-3 col-xs-6 text-center">
                  <p>Projects</p>
                  <div class="h1">25</div>
               </div>
               <div class="col-sm-3 col-xs-6 text-center">
                  <p>Teammates</p>
                  <div class="h1">85</div>
               </div>
               <div class="col-sm-3 col-xs-6 text-center">
                  <p>Hours</p>
                  <div class="h1">380</div>
               </div>
               <div class="col-sm-3 col-xs-6 text-center">
                  <p>Budget</p>
                  <div class="h1">$ 10,000.00</div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- END chart-->
</div>
<!-- START radial charts-->
<div class="row mb-lg">
   <div class="col-sm-3 col-xs-6 text-center">
      <p>Current Project</p>
      <canvas classyloader="" data-height="150px" data-diameter="60" data-font-size="25px" data-percentage="60" data-speed="30" data-line-color="{{colorByName('info')}}" data-remaining-line-color="#edf2f6" data-line-width="2"></canvas>
   </div>
   <div class="col-sm-3 col-xs-6 text-center">
      <p>Current Progress</p>
      <canvas classyloader="" data-height="150px" data-diameter="60" data-font-size="25px" data-percentage="30" data-speed="30" data-line-color="{{colorByName('pink')}}" data-remaining-line-color="#edf2f6" data-line-width="2"></canvas>
   </div>
   <div class="col-sm-3 col-xs-6 text-center">
      <p>Space Usage</p>
      <canvas classyloader="" data-height="150px" data-diameter="60" data-font-size="25px" data-percentage="50" data-speed="30" data-line-color="{{colorByName('purple')}}" data-remaining-line-color="#edf2f6" data-line-width="2"></canvas>
   </div>
   <div class="col-sm-3 col-xs-6 text-center">
      <p>Interactions</p>
      <canvas classyloader="" data-height="150px" data-diameter="60" data-font-size="25px" data-percentage="75" data-speed="30" data-line-color="{{colorByName('warning')}}" data-remaining-line-color="#edf2f6" data-line-width="2"></canvas>
   </div>
</div>
<!-- START radial charts-->
<!-- START Multiple List group-->
<div class="list-group">
   <a href="#" class="list-group-item">
      <table class="wd-wide">
         <tbody>
            <tr>
               <td class="wd-xs">
                  <div class="ph">
                     <img src="app/img/dummy.png" alt="" class="media-box-object img-responsive img-rounded thumb64" />
                  </div>
               </td>
               <td>
                  <div class="ph">
                     <h4 class="media-box-heading">Project A</h4>
                     <small class="text-muted">Vestibulum ante ipsum primis in faucibus orci</small>
                  </div>
               </td>
               <td class="wd-sm hidden-xs hidden-sm">
                  <div class="ph">
                     <p class="m0">Last change</p>
                     <small class="text-muted">4 weeks ago</small>
                  </div>
               </td>
               <td class="wd-xs hidden-xs hidden-sm">
                  <div class="ph">
                     <p class="m0 text-muted">
                        <em class="icon-users mr fa-lg"></em>26</p>
                  </div>
               </td>
               <td class="wd-xs hidden-xs hidden-sm">
                  <div class="ph">
                     <p class="m0 text-muted">
                        <em class="icon-doc mr fa-lg"></em>3500</p>
                  </div>
               </td>
               <td class="wd-sm">
                  <div class="ph">
                     <progressbar value="80" type="success" class="m0 progress-xs">80%</progressbar>
                  </div>
               </td>
            </tr>
         </tbody>
      </table>
   </a>
</div>
<div class="list-group">
   <a href="#" class="list-group-item">
      <table class="wd-wide">
         <tbody>
            <tr>
               <td class="wd-xs">
                  <div class="ph">
                     <img src="app/img/dummy.png" alt="" class="media-box-object img-responsive img-rounded thumb64" />
                  </div>
               </td>
               <td>
                  <div class="ph">
                     <h4 class="media-box-heading">Project X</h4>
                     <small class="text-muted">Vestibulum ante ipsum primis in faucibus orci</small>
                  </div>
               </td>
               <td class="wd-sm hidden-xs hidden-sm">
                  <div class="ph">
                     <p class="m0">Last change</p>
                     <small class="text-muted">Today at 06:23 am</small>
                  </div>
               </td>
               <td class="wd-xs hidden-xs hidden-sm">
                  <div class="ph">
                     <p class="m0 text-muted">
                        <em class="icon-users mr fa-lg"></em>3</p>
                  </div>
               </td>
               <td class="wd-xs hidden-xs hidden-sm">
                  <div class="ph">
                     <p class="m0 text-muted">
                        <em class="icon-doc mr fa-lg"></em>150</p>
                  </div>
               </td>
               <td class="wd-sm">
                  <div class="ph">
                     <progressbar value="50" type="purple" class="m0 progress-xs">50%</progressbar>
                  </div>
               </td>
            </tr>
         </tbody>
      </table>
   </a>
</div>
<div class="list-group">
   <a href="#" class="list-group-item">
      <table class="wd-wide">
         <tbody>
            <tr>
               <td class="wd-xs">
                  <div class="ph">
                     <img src="app/img/dummy.png" alt="" class="media-box-object img-responsive img-rounded thumb64" />
                  </div>
               </td>
               <td>
                  <div class="ph">
                     <h4 class="media-box-heading">Project Z</h4>
                     <small class="text-muted">Vestibulum ante ipsum primis in faucibus orci</small>
                  </div>
               </td>
               <td class="wd-sm hidden-xs hidden-sm">
                  <div class="ph">
                     <p class="m0">Last change</p>
                     <small class="text-muted">Yesterday at 10:20 pm</small>
                  </div>
               </td>
               <td class="wd-xs hidden-xs hidden-sm">
                  <div class="ph">
                     <p class="m0 text-muted">
                        <em class="icon-users mr fa-lg"></em>15</p>
                  </div>
               </td>
               <td class="wd-xs hidden-xs hidden-sm">
                  <div class="ph">
                     <p class="m0 text-muted">
                        <em class="icon-doc mr fa-lg"></em>480</p>
                  </div>
               </td>
               <td class="wd-sm">
                  <div class="ph">
                     <progressbar value="20" type="green" class="m0 progress-xs">20%</progressbar>
                  </div>
               </td>
            </tr>
         </tbody>
      </table>
   </a>
   <!-- END dashboard main content-->
</div>
<!-- END Multiple List group-->